<template>
  <div class="draw-content">
    <!-- 主容器 => 左侧 -->
    <div class="view-content-container">
      <div class="scroll-parent">
        <el-scrollbar>
          <draggable
            class="main-grid"
            :group="{ name: 'dragGroup' }"
            :list="mainList"
            animation="300"
            item-key="id"
            handle=".handle"
            :move="handleMove"
            @end="onEnd"
          >
            <template #item="{ element: item, index }">
              <div
                class="grid-item"
                :class="{active: item.active, handle: item.img}"
                :style="gridArea(item.normsVal)"
              >
                <template v-if="item.img">
                  <div class="item-control">
                    <p>{{ item.name }}</p>
                    <el-icon class="close" @click="delItem(index)">
                      <Close />
                    </el-icon>
                  </div>
                  <img class="item-img" :src="`${item.img}?time=${new Date().getTime()}`" crossorigin="anonymous">
                </template>
              </div>
            </template>
            <template #footer>
              <div class="grid-item added" @click="addMain">
                <el-icon :size="60" color="#8291A9">
                  <CirclePlus />
                </el-icon>
              </div>
            </template>
          </draggable>
        </el-scrollbar>
      </div>
    </div>
    <!-- 模板组件容器 => 右侧 -->
    <div class="view-content-module">
      <el-tabs v-model="tabVal" class="module-tabs">
        <el-tab-pane label="数据板块" name="data">
          <div class="content-title">
            人员管理类
          </div>
          <div class="module">
            <div class="module-item" v-for="(row) in moduleList" :key="row.component">
              <div class="module-title">
                <div>
                  <p>组件名称:</p>
                  <p :title="row.name">
                    {{ row.name }}
                  </p>
                </div>
                <div>
                  <p>组件规格:</p>
                  <p>
                    <el-select v-model="row.normsVal" placeholder="请选择组件规格" size="small" class="norms">
                      <el-option
                        v-for="(n, i) in row.norms"
                        :key="i"
                        :label="n"
                        :value="n"
                      />
                    </el-select>
                  </p>
                </div>
              </div>
              <draggable
                class="drag-img"
                :list="[row]"
                :group="{ name: 'dragGroup', pull: 'clone', put: false }"
                :sort="false"
                :move="handleMove"
                @end="onEnd"
                animation="300"
                item-key="id"
              >
                <template #item>
                  <div
                    class="grid-item"
                    :style="gridArea(row.normsVal)"
                  >
                    <img class="item-img" :src="row.img">
                  </div>
                </template>
              </draggable>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="地图板块" name="map">
          <p style="color: #fff;text-align: center;">
            待完善
          </p>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, toRefs } from 'vue'
import draggable from 'vuedraggable'
import { getComponentList } from '@/api/system'
import { getGridData, getFormData, MainType, initMain, generateId } from './composables'

// 拖拽数据
const { mainList } = toRefs(getFormData().value)

// 右侧模板
const tabVal = ref('data')
const moduleList = ref<MainType[]>([])

// 获取grid参数
const { gridArea, client } = getGridData('.view-content-container .scroll-parent')

// 克隆数据
const cloneData = ref<MainType>()
const cloneIndex = ref(0)
// 拖动事件
const handleMove = (e: any) => {
  cloneData.value = Object.assign({}, JSON.parse(JSON.stringify(e.draggedContext.element)), {
    id: generateId()
  })
  cloneIndex.value = e.relatedContext.index
  e.relatedContext.list.forEach((item: any) => {
    item.active = false
  })
  e.relatedContext.element.active = true
  return false
}
// 拖动结束事件
const onEnd = (e: any) => {
  if (cloneData.value) {
    if (e.item.className.includes('handle')) {
      if (e.oldIndex === cloneIndex.value) return
      mainList.value.splice(cloneIndex.value, 1, cloneData.value)
      mainList.value.splice(e.oldIndex, 1, initMain())
      return
    }
    mainList.value.splice(cloneIndex.value, 1, cloneData.value)
  }
}
// 添加网格
const addMain = () => {
  mainList.value.push(initMain())
}
// 删除元素
const delItem = (index: number) => {
  mainList.value.splice(index, 1, initMain())
}

// 获取组件列表
const getList = async () => {
  const data = await getComponentList()
  moduleList.value = []
  data.forEach((item: any) => {
    const norms = item.componentSize.split(',')
    moduleList.value.push({
      id: generateId(),
      name: item.componentName,
      component: item.component,
      norms,
      normsVal: norms[0],
      active: false,
      img: item.imageUrl
    })
  })
}
getList()
</script>
<script lang="ts">
export default {
  name: 'Drag'
}
</script>
<style lang="scss" scoped>
// 主容器
.draw-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;

  // 容器布局
  .view-content-container {
    width: 70%;
    height: 100%;
    margin-right: $space-margin;
    box-sizing: border-box;
    position: relative;
    background-color: #1F2935;
    padding: v-bind("client.gap + 'px'");
    padding-bottom: 0;
    overflow: hidden;
    .scroll-parent {
      width: 100%;
      height: 100%;
    }
    .main-grid {
      height: 100%;
      display: grid;
      grid-template-columns: repeat(auto-fill, v-bind("client.w + 'px'"));
      grid-template-rows: repeat(v-bind("client.scale"), v-bind("client.h + 'px'"));
      grid-auto-columns: v-bind("client.w + 'px'");
      grid-auto-rows: v-bind("client.h + 'px'");
      grid-auto-flow: column dense;
      grid-gap: v-bind("client.gap + 'px'");
      .grid-item {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 3px solid #8291A9;
        box-sizing: border-box;
        &.added {
          cursor: pointer;
        }
        &.active {
          border: 3px solid var(--el-color-primary);
        }
        &:hover, &.active {
          .item-control {
            display: flex;
          }
        }
        .item-control {
          display: none;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          color: #fff;
          align-items: center;
          justify-content: space-between;
          background-color: rgba(#000, .8);
          padding: 0 10px;
          font-size: 14px;
          line-height: 28px;
          box-sizing: border-box;
          .close {
            cursor: pointer;
            &:hover {
              color: var(--el-color-primary);
            }
          }
        }
      }
    }
  }

  // 模板
  .view-content-module {
    width: 30%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    .module-tabs {
      :deep(.el-tabs__header) {
        background-color: #1F2935;
        padding-left: 20px;
        margin-bottom: 2px;
      }
      :deep(.el-tabs__nav-wrap::after) {
        background-color: transparent;
      }
      :deep(.el-tabs__item) {
        color: #8291A9;
        &.is-active {
          color: #fff;
          font-weight: bold;
        }
      }
    }
    .module-tabs {
      height: 100%;
      display: flex;
      flex-direction: column;
      :deep(.el-tabs__content) {
        padding: 10px;
        background: #1F2935;
        box-sizing: border-box;
        flex: 1;
        overflow: auto;
      }
    }
    .module {
      .module-item {
        margin-bottom: 10px;
        &:last-child {
          margin-bottom: 0;
        }
        .module-title {
          display: flex;
          justify-content: space-between;
          background: #283442;
          padding: 10px;
          margin-bottom: 10px;
          font-size: 12px;
          > div {
            flex: 0 0 45%;
            overflow: hidden;
            display: flex;
            align-items: center;
            color: #8291A9;
            p:last-child {
              margin-left: 10px;
              flex: 1;
              color: var(--el-color-primary);
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
}
.item-img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
</style>
